<template>
  <div class="workflow">
    <div class="control_box">
      <el-button type="primary" icon="el-icon-back" size="mini" @click="revoke">后退</el-button>
      <el-button type="primary" icon="el-icon-right" size="mini" @click="forward">前进</el-button>
      <el-button type="primary" icon="el-icon-edit" size="mini" @click="importData">打印数据</el-button>
    </div>
    <div class="workflow_container">
      <WorkFlowMain v-if="config.childNode" :config.sync="config" @changeNode="changeNode" :contentFocus="contentFocus" />
      <WorkFlowEnd />
    </div>
    <el-drawer :size="600" :modal="false" :with-header="false" :destroy-on-close="true" :visible.sync="drawer" :before-close="beforeClose">
      <div class="drawer_title">
        <img :src="require(`@/assets/img/${drawerData.type ? drawerData.type : 0}.png`)" />
        <span class="drawer_title_text" v-show="!changeTitle">{{drawerData.title}}</span>
        <input ref="input" class="input_1" type="text" v-show="changeTitle" v-model="drawerData.title" placeholder="请输入标题" @blur="changeTitle = false" />
        <i class="el-icon-edit" v-show="!changeTitle" @click="changeTitleFun"></i>
      </div>
      <div class="drawer_content">
        <GetSingleData v-if="drawerData.type === 3" :drawerData.sync="drawerData.data" />
      </div>
      <div class="drawer_footer">
        <el-button size="medium" @click="cancel">取消</el-button>
        <el-button type="primary" size="medium" @click="save">保存</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import WorkFlowMain from '@/components/WorkFlow/WorkFlowMain.vue'
import WorkFlowEnd from '@/components/WorkFlow/WorkFlowEnd.vue'
import GetSingleData from '@/components/WorkFlow/Form/GetSingleData'

import { memoryData } from '@/components/WorkFlow/Data/WorkFlowData'

import { nanoid } from 'nanoid'

export default {
  components: { WorkFlowMain, WorkFlowEnd, GetSingleData },
  data () {
    return {
      config: {},
      revokeNum: 1,
      noPush: false,
      drawer: false,
      drawerData: {},
      contentFocus: '',
      changeTitle: false
    }
  },
  watch: {
    config: {
      handler (newData) {
        if (this.noPush) {
          this.noPush = false
        } else {
          if (this.revokeNum === 1) {
            memoryData.push(JSON.parse(JSON.stringify(newData)))
            if (memoryData.length > 20) {
              memoryData.shift()
            }
          } else {
            memoryData.splice(memoryData.length - (this.revokeNum - 1), this.revokeNum - 1)
            memoryData.push(JSON.parse(JSON.stringify(newData)))
            this.revokeNum = 1
          }
        }
      },
      deep: true
    }
  },
  mounted () {
    this.config = {
      type: 0,
      id: nanoid(),
      title: '表单事件触发',
      data: {},
      conditionNodes: [],
      childNode: {}
    }
    setTimeout(() => {
      this.config.childNode = {
        type: 3,
        id: nanoid(),
        title: '获取单条数据',
        data: {
          getMethod: 2,
          getMethodSelect: '',
          getMethodRelation: '',
          DataFilter: 1,
          ConditionFilterData: [],
          sortRules: 2,
          sortRulesSelect: 1
        },
        conditionNodes: [],
        childNode: {}
      }
    }, 500)
  },
  methods: {
    importData () {
      console.log(this.config)
    },
    revoke () {
      if (this.revokeNum >= memoryData.length) return
      this.revokeNum += 1
      this.config = JSON.parse(JSON.stringify(memoryData[memoryData.length - this.revokeNum]))
      this.noPush = true
    },
    forward () {
      if (this.revokeNum <= 1) return
      this.revokeNum -= 1
      this.config = JSON.parse(JSON.stringify(memoryData[memoryData.length - this.revokeNum]))
      this.noPush = true
    },
    changeNode (data, index) {
      this.drawerData = data
      this.drawer = true
      this.contentFocus = data.id
    },
    beforeClose (done) {
      this.contentFocus = ''
      done()
    },
    cancel () {
      this.contentFocus = ''
      this.drawer = false
    },
    save () {
      this.contentFocus = ''
      this.drawer = false
      console.log('数据导出', this.config)
    },
    changeTitleFun () {
      this.changeTitle = true
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    }
  }
}
</script>

<style scoped>
.workflow{
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 80px 60px;
  display: flex;
  background-color: #FAFAFA;
  background-image: linear-gradient(#FAFAFA 11px,transparent 0), linear-gradient(90deg,#9EA6B7 1px,transparent 0);
  background-size:15px 12px, 12px 15px;
}
.control_box{
  z-index: 999;
  position: fixed;
  top: 20px;
  right: 36px;
}
.workflow_container{
  margin: auto;
}
.workflow >>> .el-drawer__body{
  display: flex;
  flex-direction: column;
}
.drawer_title, .drawer_footer{
  padding: 0 20px;
}
.drawer_title{
  height: 50px;
  color: #303233;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #F1F2F3;
}
.drawer_title>img{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 10px;
}
.el-icon-edit{
  margin-left: 8px;
}
.drawer_title_text{
  padding: 8px 0;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #FFF;
}
.input_1{
  padding: 8px 0;
  flex: 1;
  border: 1px solid #999;
  outline: none;
  font-size: 16px;
  font-weight: bold;
  color: #303233;
}
.drawer_footer{
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid #F1F2F3;
}
.drawer_content{
  flex: 1;
}
</style>
